<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="layout" content="bocMain"/>
    <title>进件作业系统</title>
</head>

<body>
<header class="header-title">人脸识别</header>

<div id="uploader-demo">
    <div id="fileList" class="uploader-list"></div>
</div>
<g:form method="post" action="contactApprove" class="myform">
    <input type="hidden" id="id" name="id" value="${this?.opportunity?.id}">
    <input type="hidden" id="idNumber" name="idNumber" value="${this?.contact?.idNumber}">
    <input type="hidden" id="fullName" name="fullName" value="${this?.contact?.fullName}">
    <input type="hidden" name="type" id="type" value="${this?.type}">
    <input type="hidden" id="score" name="score" value="">
    <input type="hidden" id="faceRecognitionScore" value="${com.next.FlexField.findByNameAndCategory('人脸识别评分限制', com.next.FlexFieldCategory.findByName('人脸识别评分限制'))?.defaultValue}">
    <div class="photoFrame">
        <div class="photo-item" >
            <img src="" alt="" class="imgUrl" id="thumbImg" style="display: none">
            <div class="input-box" id="filePicker">
                <asset:image src="/boc/photo.png" alt=""/>
                <h5>点击拍摄</h5>
            </div>
        </div>

        <div class="face-info">
            <p>注意事项：</p>
            <p>1.请在光线明亮的环境中进行</p>
            <p>2.请保持面部在屏幕的正中央，避免转头或移出屏幕</p>
        </div>
    </div>
</g:form>
<script>
    $(function () {
        $("input[type='file']").attr("capture","camera");
        // 初始化Web Uploader
        var idNumber = $("#idNumber").val();
        var fullName = $("#fullName").val();
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            // swf文件路径
            swf: '/assets/Uploader.swf',

            // 文件接收服务端。
            server: "/bocAppOpportunity/ajaxEvaluateComponent",

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'bmp,gif,jpg,jpeg,png',
                mimeTypes: 'image/*'
            },
            // 配置生成缩略图的选项
            thumb: {
                // 缩略图的宽高，当取值介于0-1时，被当成百分比使用
                width: 500,
                height: 500,
                // 强制转换成指定的类型
                type: "image/jpeg",
                // 图片质量，只有type为image/jpeg的时候才有效
                quality: 90,
                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false
                allowMagnify: true,
                // 是否允许裁剪
                crop: false
            },
            compress: {
                width: 1500,
                height: 1500,

                // 图片质量，只有type为`image/jpeg`的时候才有效。
                quality: 99,

                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                allowMagnify: false,

                // 是否允许裁剪。
                crop: false,

                // 是否保留头部meta信息。
                preserveHeaders: true,
                fileNumLimit: 1,
                // 如果发现压缩后文件大小比原来还大，则使用原来图片
                // 此属性可能会影响图片自动纠正功能
                noCompressIfLarger: false,

                // 单位字节，如果图片大小小于此值，不会采用压缩。
                compressSize: 0,
                fileSingleSizeLimit: 1024*1024*2
            },
        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            // 可以在控制台中查看file对象的详细信息
            // 创建缩略图 makeThumb，还可以写成(file,callback,width,height)
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    helpMessage("不能预览");
                    return;
                } else {
                    $("#thumbImg").attr('src', src).show();
                }
            });
        });

        // 文件上传开始
        uploader.on('startUpload', function (file,data,obj ) {

            uploader.option('formData', {
                "idNumber": idNumber,
                "fullName": fullName,
                "component": "人脸识别"
            });
            helpMessage("开始上传");
        });

        // 文件上传成功
        uploader.on('uploadSuccess', function (file, response) {
//            helpMessage("上传成功");
            var score = $("#faceRecognitionScore").val();
            if(!score){
                score = "0.8"
            }
            if (response.code == "0" || response.code == 0) {
                if (response.data.score > parseFloat(score)) {
                    var token = getUploadToken()
                    var key = getRandom(28) + file.name.substr(file.name.lastIndexOf('.'));
                    var f = uploader.getFiles()[0];
                    $("#score").val(response.data.score);
                    Qiniu_upload(f, token, key);
                } else {
                    helpMessage("评分过低，请重新识别");
                    return;
                }
            } else {
                window.location.href = "/bocAppOpportunity/faceRecognitionFailed/" + $("#id").val()
            }
        });
        // 文件上传失败
        uploader.on('uploadError', function (type)  {
//            console.log(uploader.getStats());
//            console.log(uploader.getFiles('error'));
        });
        uploader.on("error", function (type) {
            if (type == "Q_TYPE_DENIED") {
                helpMessage("请上传JPG、PNG、GIF、BMP格式文件");
            } else if (type == "Q_EXCEED_SIZE_LIMIT") {
                helpMessage("文件大小不能超过2M");
            }else {
                helpMessage("上传出错！请检查后重新上传！错误代码"+type);
            }
        });

        function helpMessage(message) {
            $(".helpMsg").text(message).fadeIn(200);
            setTimeout(function () {
                $(".helpMsg").fadeOut(200);
            }, 2000);
        }
        function getUploadToken() {
            var token = ""
            $.ajax({
                type: "POST",
                url: "/attachments/getUploadToken2",
                async: false,
                success: function (data) {
                    if (data.status == "success") {
                        token = data.token;
//                        console.log("getUploadToken success.");
                    }
                },
            });
            return token
        }

        function getRandom(length) {
            var str = Math.random().toString(36).substr(2);
            if (str.length >= length) {
                return str.substr(0, length);
            }
            str += getRandom(length - str.length);
            return str;
        }

        function getKey() {
            var timestamp = (new Date()).valueOf();
            return timestamp + '.jpg'
        }
        var Qiniu_upload = function (f, token, key, name) {
            var Qiniu_UploadUrl = "https://upload-z1.qiniup.com";
            var xhr = new XMLHttpRequest();
            xhr.open('POST', Qiniu_UploadUrl, true);
            var formData = new FormData();
            formData.append('key', key);
            formData.append('token', token);
            formData.append('file', f);
            xhr.onreadystatechange = function (response) {
                if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                    var blkRet = JSON.parse(xhr.responseText);
                    $("#fileUrl").val(blkRet.key);
                    window.location.href = "/bocAppOpportunity/faceRecognitionSuccess/" + $("#id").val() + "?score=" +  $("#score").val() +"&fileUrl="+blkRet.key
                } else if (xhr.status != 200 && xhr.responseText) {
                    var blkRet = JSON.parse(xhr.responseText);
                }
            };
            xhr.send(formData);
        };


    });
</script>
</body>
</html>